<template>
	<view class="content">
		<view class="bottom-view">
			<city-select v-model="isShowCityPop" @city-change="cityChange"></city-select>
			<u-cell-group class="bottom-view2" :border="false">
				<u-cell-item title="头像" @click="changeHead">
					<image class="head-icon" slot="right-icon" :src="headUrl"></image>
				</u-cell-item>
				<u-cell-item title="账号" :arrow="false" :value="userinfo.username"></u-cell-item>
				<u-cell-item title="昵称" :value="userinfo.nickname" @click="setNickname"></u-cell-item>
				<u-cell-item title="地址" :value="userinfo.address" :border-bottom="false" @click="isShowCityPop = true">
				</u-cell-item>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	import citySelect from '../../components/u-city-select.vue';
	const config=require('../../common/config.js')

	export default {
		data() {
			return {
				userinfo: {},
				cityresult: '',
				isShowCityPop: false
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo')
		},
		components: {
			'city-select':citySelect
		},
		computed: {
			headUrl: function() {
				let url = '';
				if (!this.userinfo || !this.userinfo.headicon) {
					url = '../../static/img/ic_touxiang.png'
				} else {
					url = this.$mConfig.formatFileUrl(this.userinfo.headicon);
				}
				return url;
			}
		},
		methods: {
			setNickname() {
				uni.navigateTo({
					url: "../setnickname/setnickname"
				})
			},
			changeHead() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						this.uploadhead(tempFilePaths[0]);
					}
				})
			}, 
			uploadhead(path) {
				uni.uploadFile({
					url: config.apiUrl + '/movie/api/upload', 
					filePath: path,
					name: 'file',
					// formData: {
					// 	'user': 'test'
					// },
					success: (uploadFileRes) => {
						let resultstr = uploadFileRes.data;
						let url = JSON.parse(resultstr).url;
						this.userinfo.headicon = url;
						this.upUserInfo();
					}
				});
			},
			upUserInfo() {
				this.$u.post('/client/user/upuserinfo', {
					userinfo: this.userinfo
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							icon: 'none',
							position: 'bottom'
						});
						uni.setStorageSync('userinfo', this.userinfo);
					}

				});
			},
			cityChange(e) {
				this.cityresult = e.province.label + '-' + e.city.label + '-' + e.area.label;
				this.userinfo.address=this.cityresult;
				this.upUserInfo();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bottom-view {
			width: 90%;
			margin-top: 40rpx;
			margin-bottom: 25rpx;
			border-radius: 10rpx;
			background-color: $uni-bg-color;

			.bottom-view2 {
				width: 100%;
				padding: 0rpx 8rpx 0rpx 8rpx;

				.head-icon {
					width: 90rpx;
					border-radius: 45rpx;
					height: 90rpx;
				}
			}
		}
	}
</style>
